<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
   <meta charset="utf-8" />
   <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
   <!-- Mobile viewport optimized: h5bp.com/viewport -->
   <meta name="viewport" content="width=device-width">

   <title>Square · BootMetro</title>

   <meta name="robots" content="noindex, nofollow">
   <meta name="description" content="MetroUI-Web : Simple and complete web UI framework to create web apps with Windows 8 Metro user interface." />
   <meta name="keywords" content="metro, metroui, metro-ui, metro ui, windows 8, metro style, bootstrap, framework, web framework, css, html" />
   <meta name="author" content="AozoraLabs by Marcello Palmitessa"/>
   
   <!-- remove or comment this line if you want to use the local fonts -->
   <link href='http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>

   <link rel="stylesheet" type="text/css" href="content/css/bootstrap.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootstrap-responsive.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-tiles.css">
   <link rel="stylesheet" type="text/css" href="content/css/bootmetro-charms.css">
   <link rel="stylesheet" type="text/css" href="content/css/metro-ui-light.css">
   <link rel="stylesheet" type="text/css" href="content/css/icomoon.css">

   <!--  these two css are to use only for documentation -->
   <link rel="stylesheet" type="text/css" href="content/css/demo.css">
   <link rel="stylesheet" type="text/css" href="scripts/google-code-prettify/prettify.css" >

   <!-- Le fav and touch icons -->
   <link rel="shortcut icon" href="content/ico/favicon.ico">
   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="content/ico/apple-touch-icon-144-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="114x114" href="content/ico/apple-touch-icon-114-precomposed.png">
   <link rel="apple-touch-icon-precomposed" sizes="72x72" href="content/ico/apple-touch-icon-72-precomposed.png">
   <link rel="apple-touch-icon-precomposed" href="content/ico/apple-touch-icon-57-precomposed.png">
  
   <!-- All JavaScript at the bottom, except for Modernizr and Respond.
      Modernizr enables HTML5 elements & feature detects; Respond is a polyfill for min/max-width CSS3 Media Queries
      For optimal performance, use a custom Modernizr build: www.modernizr.com/download/ -->
   <script src="scripts/modernizr-2.6.1.min.js"></script>

   <script type="text/javascript">
      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-3182578-6']);
      _gaq.push(['_trackPageview']);
      (function() {
         var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
         ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
         var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();
   </script>
</head>

<body data-accent="blue">
  <!-- Prompt IE 6 users to install Chrome Frame. Remove this if you support IE 6.
       chromium.org/developers/how-tos/chrome-frame-getting-started -->
  <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->

   <!-- Header
   ================================================== -->
   <header id="nav-bar" class="container-fluid">
      <div class="row-fluid">
         <div class="span8">
            <div id="header-container">
               <a id="backbutton" class="win-backbutton" href="./tiles-templates.html"></a>
               <h5>BootMetro</h5>
               <div class="dropdown">
                  <a class="header-dropdown dropdown-toggle accent-color" data-toggle="dropdown" href="#">
                     Square Tiles Templates
                     <b class="caret"></b>
                  </a>
                  <ul class="dropdown-menu">
                  <li><a href="./hub.html">Hub</a></li>
                  <li><a href="./tiles-templates.html">Tile Templates</a></li>
                  <li><a href="./listviews.html">ListViews</a></li>
                  <li><a href="./appbar-demo.html">Demo App-Bar</a></li>
                  <li><a href="./table.html">Demo Table</a></li>
                  <li><a href="./icons.html">Icons</a></li>
                  <li><a href="./scaffolding.html">Bootstrap Scaffolding</a></li>
                  <li><a href="./base-css.html">Bootstrap Base CSS</a></li>
                  <li><a href="./components.html">Bootstrap Components</a></li>
                  <li><a href="./javascript.html">Bootstrap Javascript</a></li>
                  <li class="divider"></li>
                  <li><a href="./index.html">Home</a></li>
               </ul>
            </div>
            </div>
         </div>
         <div id="top-info" class="pull-right">
         <a href="#" class="pull-left">
            <div class="top-info-block">
               <h3>FirstName</h3>
               <h4>LastName</h4>
            </div>
            <div class="top-info-block">
               <b class="icon-user"></b>
            </div>
         </a>
         <hr class="separator pull-left"/>
         <a id="settings" class="pull-left" href="#">
            <b class="icon-settings"></b>
         </a>
      </div>
   </div>
   </header>
   
   <div class="container-fluid">
      <div class="subnav">
         <ul class="nav nav-pills">
            <li><a href="#textonly">Text Only Tiles</a></li>
            <li><a href="#imageonly">Image Only Tiles</a></li>
            <li><a href="#squarepeek">Square peek templates</a></li>
         </ul>
      </div>
   </div>
   
   
   <div class="container-fluid metro">
      <div class="row-fluid">
         <div class="span12">
   
   
            <table id="apptile" class="table">
               <caption><h3>App Tile</h3></caption>
               <thead>
                  <tr>
                     <th>Template Name</th>
                     <th>Description</th>
                     <th>Tile</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td><strong>Square App Tile</strong></td>
                     <td></td>
                     <td>
                        <a class="tile app" href="#">
                           <div class="image-wrapper">
                              <img src="content/img/Windows 8.png" alt=""/>
                           </div>
                           <div class="app-label">AppName</div>
                           <div class="app-count">12</div>
                        </a>
                     </td>
                  </tr>
               </tbody>
            </table>
   
   
            <table id="textonly" class="table">
               <caption><h3>Text Only Tiles</h3></caption>
               <thead>
                  <tr>
                     <th>Template Name</th>
                     <th>Description</th>
                     <th>Tile</th>
                  </tr>
               </thead>
               <tbody class="">
                  <tr>
                     <td><strong>TileSquareBlock</strong></td>
                     <td>One short string of large block text over a single, short line of bold, regular text.</td>
                     <td>
                        <a class="tile square text tilesquareblock" href="#">
                           <div class="text-big">22</div>
                           <div class="text">Text field 2</div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileSquareText01</strong></td>
                     <td>One header string in larger text on the first line; three strings of regular text on each of the next three lines. Text does not wrap.</td>
                     <td>
                        <a class="tile square text" href="#">
                           <div class="text-header">Header</div>
                           <div class="text">Text field 1</div>
                           <div class="text">Text field 2</div>
                           <div class="text">Text field 3</div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileSquareText02</strong></td>
                     <td>One header string in larger text on the first line, over one string of regular text wrapped over a maximum of three lines.</td>
                     <td>
                        <a class="tile square text" href="#">
                           <div class="text-header">Header</div>
                           <div class="text3">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileSquareText03</strong></td>
                     <td>Four strings of regular text on four lines. Text does not wrap.</td>
                     <td>
                        <a class="tile square text" href="#">
                           <div class="text">Text field 1</div>
                           <div class="text">Text field 2</div>
                           <div class="text">Text field 3</div>
                           <div class="text">Text field 4</div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileSquareText04</strong></td>
                     <td>One string of regular text wrapped over a maximum of four lines.</td>
                     <td>
                        <a class="tile square text" href="#">
                           <div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                        </a>
                     </td>
                  </tr>
               </tbody>
            </table>
   
            <table id="imageonly" class="table">
               <caption><h3>Image Only Tiles</h3></caption>
               <thead>
                  <tr>
                     <th>Template Name</th>
                     <th>Description</th>
                     <th>Tile</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td><strong>TileSquareImage</strong></td>
                     <td>One square image that fills the entire tile, no text.</td>
                     <td>
                        <a class="tile square image" href="#">
                           <img src="content/img/avatar-movie-puzzles-2.jpg" alt=""/>
                        </a>
                     </td>
                  </tr>
               </tbody>
            </table>
   
            <table id="squarepeek" class="table">
               <caption><h3>Square peek templates</h3></caption>
               <thead>
                  <tr>
                     <th>Template Name</th>
                     <th>Description</th>
                     <th>Tile</th>
                  </tr>
               </thead>
               <tbody>
                  <tr>
                     <td><strong>TileSquarePeekImageAndText01</strong></td>
                     <td>Top: One square image, no text. Bottom: One header string in larger text on the first line, three strings of regular text on each of the next three lines. Text does not wrap.</td>
                     <td>
                        <a class="tile squarepeek" href="#">
                           <img src="content/img/avatar-movie-puzzles-2.jpg" alt=""/>
                           <div class="text-inner">
                              <div class="text-header">Header</div>
                              <div class="text">Text field 1</div>
                              <div class="text">Text field 2</div>
                              <div class="text">Text field 3</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileSquarePeekImageAndText02</strong></td>
                     <td>Top: Square image, no text. Bottom: One header string in larger text on the first line, over one string of regular text wrapped over a maximum of three lines.</td>
                     <td>
                        <a class="tile squarepeek" href="#">
                           <img src="content/img/avatar-movie-puzzles-2.jpg" alt=""/>
                           <div class="text-inner">
                              <div class="text-header">Header</div>
                              <div class="text3">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileSquarePeekImageAndText03</strong></td>
                     <td>Top: Square image, no text. Bottom: Four strings of regular text on four lines. Text does not wrap.</td>
                     <td>
                        <a class="tile squarepeek" href="#">
                           <img src="content/img/avatar-movie-puzzles-2.jpg" alt=""/>
                           <div class="text-inner">
                              <div class="text">Text field 1</div>
                              <div class="text">Text field 2</div>
                              <div class="text">Text field 3</div>
                              <div class="text">Text field 4</div>
                           </div>
                        </a>
                     </td>
                  </tr>
                  <tr>
                     <td><strong>TileSquarePeekImageAndText04</strong></td>
                     <td>Top: Square image, no text. Bottom: One string of regular text wrapped over a maximum of four lines.</td>
                     <td>
                        <a class="tile squarepeek" href="#">
                           <img src="content/img/avatar-movie-puzzles-2.jpg" alt=""/>
                           <div class="text-inner">
                              <div class="text4">Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim.</div>
                           </div>
                        </a>
                     </td>
                  </tr>
               </tbody>
            </table>
   
         </div>
      </div>
   </div>   <div id="charms" class="win-ui-dark">
   
      <div id="theme-charms-section" class="charms-section">
         <div class="charms-header">
            <a href="#" class="close-charms win-command">
               <span class="win-commandimage win-commandring">&#xe05d;</span>
            </a>
            <h2>Settings</h2>
         </div>
   
         <div class="row-fluid">
            <div class="span12">
   
               <form class="">
                  <label for="win-theme-select">Change theme:</label>
                  <select id="win-theme-select" class="">
                     <option value="metro-ui-semilight">Semi-Light</option>
                     <option value="metro-ui-light">Light</option>
                     <option value="metro-ui-dark">Dark</option>
                  </select>
               </form>
   
            </div>
         </div>
      </div>
   
   </div>

   <!-- Grab Google CDN's jQuery. fall back to local if necessary -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
   <script>window.jQuery || document.write("<script src='scripts/jquery-1.8.2.min.js'>\x3C/script>")</script>

   <script type="text/javascript" src="scripts/google-code-prettify/prettify.js"></script>
   <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
   <script type="text/javascript" src="scripts/jquery.scrollTo.js"></script>
   <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
   <script type="text/javascript" src="scripts/bootmetro.js"></script>
   <script type="text/javascript" src="scripts/bootmetro-charms.js"></script>
   <script type="text/javascript" src="scripts/demo.js"></script>
   <script type="text/javascript" src="scripts/holder.js"></script>

   <script type="text/javascript">
      $(".metro").metro();
   </script>
</body>
</html>
